可能会|心地_ReactAntdHelloWorld

篇首语：本文由编程笔记#小编为大家整理，主要介绍了React Antd HelloWorld相关的知识，希望对你有一定的参考价值。

react antdesign helloworld

• 安装antd
• 第一个示例HelloWorld
• 报错解决
• • 快速解决
  
  

使用 npm 或 yarn 安装#
我们推荐使用 npm 或 yarn 的方式进行开发&＃xff0c;不仅可在开发环境轻松调试&＃xff0c;也可放心地在生产环境打包部署使用&＃xff0c;享受整个生态圈和工具链带来的诸多好处。

$ npm install antd --save
或者
$ yarn add antd


如果你的网络环境不佳&＃xff0c;推荐使用 cnpm。

使用antd的日期组件&＃xff0c;需要引入组件和样式&＃xff0c;如下

import React from &＃39;react&＃39;
import ReactDOM from &＃39;react-dom/client&＃39;
import DatePicker from &＃39;antd&＃39;;
import "antd/dist/antd.min.css";
const root &＃61; ReactDOM.createRoot(document.getElementById("root"));
root.render(
<div>HelloWorld: <DatePicker /></div>
);


效果&＃xff1a;

若你引入的是import "antd/dist/antd.css"

可能会报错如下&＃xff1a;


WARNING in ./node_modules/antd/dist/antd.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/antd/dist/antd.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map: &＃39;webpack://antd/./components/config-provider/style/index.less&＃39; URL is not supported
WARNING in ./node_modules/antd/dist/antd.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/antd/dist/antd.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map: &＃39;webpack://antd/./components/icon/style/index.less&＃39; URL is not supported
WARNING in ./node_modules/antd/dist/antd.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/antd/dist/antd.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map: &＃39;webpack://antd/./components/locale-provider/style/index.less&＃39; URL is not supported
WARNING in ./node_modules/antd/dist/antd.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/antd/dist/antd.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map: &＃39;webpack://antd/./components/time-picker/style/index.less&＃39; URL is not supported
webpack compiled with 4 warnings


快速解决

出现这个问题是因为 react-script 升级到5.0.0.
通过npx create-react-app 创建的项目,
引入antd.css 之后会看到这个警告。

改为引入import "antd/dist/antd.min.css";